<template>
  <div>
    <el-tag
      :key="tag"
      v-for="tag in tagArray"
      :closable="closable"
      :close-transition="false"
      @close="CloseTag(tag)"
    >
      {{tag}}
    </el-tag>
    <div class="left tag-input" @keydown="tagKeydown" v-if="editable">
      <el-autocomplete
        v-model="tagInputValue"
        :fetch-suggestions="QuerySearch"
        placeholder="输入标记"
        style="flex:1;min-width:224px;height: 36px;"
        @select="SetTag(true)"
        ref="input"
      ></el-autocomplete>
    </div>

  </div>
</template>
<script>
  export default {
    props: {
      action: {
        type: String, default: function () {
          return ""
        }
      },
      value: {
        type: Array, default: function () {
          return [];
        }
      },
      editable: {type: Boolean, default: true}
    },
    watch: {
      value: function (v) {
        this.tagArray = v;
      }
    },
    data() {
      return {
        tagArray: [],
        closable: true,
        tagInputValue: '',
      }
    },
    updated() {
      if (this.editable) {
        this.$refs.input.$refs.input.$refs.input.addEventListener("blur", () => {
          if (this.editable) {
            this.SetTag();
          }
        })
      }
    },
    computed: {
      tags() {
        return jv.main._data.popData.tags
          .filter(it => {
            return this.action == it.action
          })
          .map(it => it.tags)
          .unwind()
          .filter(it=>it)
          .distinct();
      },
    },
    methods: {
      QuerySearch(queryString, cb) {
        // 调用 callback 返回建议列表的数据
        var data = this.tags.filter(it => {
          return this.tagArray.indexOf(it) < 0
        }).map(it => {
          return {value: it}
        });

        cb(data);
      },
      tagKeydown(e) {
        if (e.keyCode !== 13 && e.keyCode != 10) {
          return;
        }

        this.SetTag();

        e.stopPropagation();
        e.preventDefault();
        return false;
      },
      SetTag(dropdownMode) {
        var tagValue = this.tagInputValue;
        if (!tagValue) {
          return
        }
        if (this.tagArray.indexOf(tagValue) < 0) {
          this.tagArray.push(tagValue);
          this.$emit("change", this.tagArray);
        }

        if(!dropdownMode) {
          jv.main.addTag({action: this.action, tags: this.tagArray});
        }

        this.tagInputValue = "";
      },
      CloseTag(tag) {
        this.tagArray.splice(this.tagArray.indexOf(tag), 1);
        this.$emit("change", this.tagArray);
      },
    }
  }
</script>
<style scoped>
  .el-tag {
    margin-right: 10px;
  }

  .input-new-tag {
    margin-bottom: 20px;
  }

  .tag-input {
    width: 200px;
    /*height: 36px;*/
    display: inline-flex;
    position: relative;
    border: 1px solid rgb(217, 211, 191);
    border-radius: 50px;
  }

  .tag-input .left {
    z-index: 200;
    width: auto;
    display: flex;
    padding-left: 5px;
    flex-wrap: wrap;
  }

  .tag-input .left {
    display: block;
    margin-bottom: 1px;
  }

  .el-input__inner {
    width: 100%;
    border-width: 0;
    background: transparent;
  }
</style>
